<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<%@include file="/common/taglibs.jsp" %>
<%@include file="/common/javascript.jsp" %>
<html>
  <head>
  <style type="text/css">
  	.uploadify {
		position: relative;
		margin-bottom: 1em;
	}
	.uploadify-button {
		background-color: #505050;
		background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
		background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
		background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
		background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
		background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, #505050),
			color-stop(1, #707070)
		);
		background-position: center top;
		background-repeat: no-repeat;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		border: 2px solid #808080;
		color: #FFF;
		font: bold 12px Arial, Helvetica, sans-serif;
		text-align: center;
		text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
		width: 100%;
	}
	.uploadify:hover .uploadify-button {
		background-color: #606060;
		background-image: linear-gradient(top, #606060 0%, #808080 100%);
		background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
		background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
		background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
		background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, #606060),
			color-stop(1, #808080)
		);
		background-position: center bottom;
	}
	.uploadify-button.disabled {
		background-color: #D0D0D0;
		color: #808080;
	}
	.uploadify-queue {
		margin-bottom: 1em;
	}
	.uploadify-queue-item {
		background-color: #F5F5F5;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		font: 11px Verdana, Geneva, sans-serif;
		margin-top: 5px;
		max-width: 350px;
		padding: 0px;
	}
	.uploadify-error {
		background-color: #FDE5DD !important;
	}
	.uploadify-queue-item .cancel a {
		background: url('js/uploadify/uploadify-cancel.png') 0 0 no-repeat;
		float: right;
		height:	16px;
		text-indent: -9999px;
		width: 16px;
	}
	.uploadify-queue-item.completed {
		background-color: #E5E5E5;
	}
	.uploadify-progress {
		background-color: #E5E5E5;
		margin-top: 10px;
		width: 100%;
	}
	.uploadify-progress-bar {
		background-color: #0099FF;
		height: 3px;
		width: 1px;
	}
  </style>
  	 <link rel="stylesheet" href="css/global.css"/>
	 <script type="text/javascript">
		var typeid;
		var json;
		var index=0;
		var length=0;
		var id;
		$(function() {
			typeid=$("#ptypeid").val();
			json=eval("("+'${photos}'+")");
			id='${model.id}';
			if(json.length>0){
				$("#img").attr("src",'<%=basePath%>'+json[index].filePath);
				$("#lbl").html('当前第 '+(index+1)+' 张     共   '+json.length+' 张');
			}
				
		    $("#file").uploadify({
		        "swf":"js/uploadify/uploadify.swf",
		        "uploader":"fileUploadAction",
		        "cancel":"js/uploadify/uploadify-cancel.png",
		        "fileObjName":"file",
		        "method":"post",
		        "buttonText":"选择文件",
		        "auto":false,
		        "fileSizeLimit":"1024*1024",
		        "fileTypeExts":'*.jpg;*.png;*.gif;',//限制文件上传的类型
		        "queueSizeLimit":"10",
		        "queueID":"file_queue",
		        "removeTimeout":1,//上传完成后队列多长时间后消失  
		        "onQueueComplete" : function(file, data, response) {//队列全部上传触发函数
					window.parent.window.$.messager.alert('提示','上传成功',"info");
					refreshPhotoView();
	            },
	            //检测FLASH失败调用 
	            "onFallback":function(){  
	            	window.parent.window.$.messager.alert('提示','您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试!',"info");
	            }
		    });
		    $("#ptypeid").combobox({
				onChange:function(newValue,oldValue){  
					typeid=newValue;
					refreshPhotoView();
				}
			});
			
			$("#first").bind('click',function(){
				if(json.length>0){
					if(index==0){
						window.parent.window.$.messager.alert('提示','已经是第一张',"info");
					}else{
						index=0;
						$("#lbl").html('当前第 '+(index+1)+' 张     共   '+json.length+' 张');
						$("#img").attr("src",'<%=basePath%>'+json[index].filePath);
					}
				}
			});
			$("#pre").bind('click',function(){
				if(json.length>0){
					if(index==0){
						window.parent.window.$.messager.alert('提示','已经是第一张',"info");
					}else{
						index--;
						$("#lbl").html('当前第 '+(index+1)+' 张     共   '+json.length+' 张');
						$("#img").attr("src",'<%=basePath%>'+json[index].filePath);
					}
				}
			});
			$("#next").bind('click',function(){
				if(json.length>0){
					if(index==json.length-1){
						window.parent.window.$.messager.alert('提示','已经是最后一张',"info");
					}else{
						index++;
						$("#lbl").html('当前第 '+(index+1)+' 张     共   '+json.length+' 张');
						$("#img").attr("src",'<%=basePath%>'+json[index].filePath);
					}
				}
			});
			$("#last").bind('click',function(){
				if(json.length>0){
					if(index==json.length-1){
						window.parent.window.$.messager.alert('提示','已经是最后一张',"info");
					}else{
						index=json.length-1;
						$("#lbl").html('当前第 '+(index+1)+' 张     共   '+json.length+' 张');
						$("#img").attr("src",'<%=basePath%>'+json[index].filePath);
					}
				}
			});
			
			$("#delete").bind('click',function(){
				$.post("regionStatisticsAction_deleteAndPhoto",{photoId:json[index].id},function(data){
					var data = eval('(' + data + ')');
					if (!data.success){ //删除失败  
						window.parent.window.$.messager.alert('提示',"错误:"+data.message,"info");
        			}else{//删除成功
        				window.parent.window.$.messager.alert('提示',data.message,"info",function(){
        						refreshPhotoView();
        				});
        			}
        		});
			});
		});
		
		function upload(){
			$('#file').uploadify('settings', 'formData', { 'ptypeid':typeid,'businessType':'business_region','id':id});  
			$('#file').uploadify('upload','*');
		}
		
		function refreshPhotoView(){
			$.post('regionStatisticsGrid_toRefreshphotoview?ptypeid='+typeid+'&model.id='+id,function(data){
				if(data!=null&&data.length>0){
					json=data;
					index=0;
					$("#lbl").html('当前第 '+(index+1)+' 张     共   '+json.length+' 张');
					$("#img").attr("src",'<%=basePath%>'+json[index].filePath);
					document.getElementById('img').style.display = 'block'; 
				}else{
					index=0;
					$("#lbl").html('当前第 '+(index)+' 张     共   '+index+' 张');
					document.getElementById('img').style.display = 'none'; 
				}
			});
		}
	</script>
  </head>
  
  <body style="margin: 0px;overflow-style:clear; padding:0px; overflow: hidden;">
  	<table cellpadding="0" cellspacing="0" style="width: 98.5%; margin:5px;">
		<tr>
			<td>
				<table>
					<tr height="360px">
						<td><img id="img" width="550px" height="350px">
						</td>
					</tr>
					<tr>
						<td>
							<table style="height: 100%;width: 100%;margin-top: 5px;">
								<tr style="text-align: center;">
									<td style="text-align: center;"><input id="first"
										type="button" value="第一张"></input> <input id="pre"
										type="button" value="上一张"></input> <input id="next"
										type="button" value="下一张"></input> <input id="last"
										type="button" value="最后一张"></input> <input id="delete"
										type="button" value="删除"></input>
									</td>
									<td><label id="lbl"></label></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
			<td style="width: 260px;height: 100%;" valign="top">
				<table style="float: left;height: 100%;width: 100%;margin-left: 10px;">
					<tr>
						<td align="left" style="padding-bottom: 10px;padding-left: 10px;" colspan="2">
						<select id="ptypeid" class="easyui-combobox" name="ptypeid"
							style="width:150px;">
								<c:forEach items="${ptypes}" var="ptype">
									<option value="${ptype.id }">${ptype.name }</option>
								</c:forEach>
						</select>
						</td>
					</tr>
					<tr>
						<td>
							<input type="file" name="file" id="file"/>
						</td>
						<td >
							<input type="button" value="开始上传" onclick="upload()" />
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<div id="file_queue"
							style="float: right;margin-right: 10px;margin-top:5px;height:100%;width: 100%;"></div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
  </body>
</html>
